body{
    background: linear-gradient(200deg,#f7d694,#f8bc07);
}
/* 导航栏 */
*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
.a{
    /* height: 100vh; */
    /* 弹性布局 水平+垂直居中 */
    display:flex;
    align-items: flex-start;
    justify-content: center;
    /* align-items: center; */
    margin-top: -10px;
}

.nav-link  {  
    color: #ffffff; 
    transition: color 0.3s ease; /* 添加过渡效果 */  
} 
.navbar-nav{
    /* 让li水平排列 */
    display: flex;
}
.navbar-nav .nav-item{
    /* 相对定位 */
    position: relative;
    list-style: none;
    width: 205px;
    height: 50px;
    /* 光标变小手 */
    cursor: pointer;
    /* 开启3D */
    transform-style: preserve-3d;
    /* 设置过渡 */
    transition: 0.5s;
}
.navbar-nav .nav-item .t{
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
/* 每个li元素里的第一个div */
.navbar-nav .nav-item .t:first-child{
    /* background-color: #f8bc07; */
    transform: translateZ(25px);
}
/* 每个li元素里的最后一个div */
.navbar-nav .nav-item .t:last-child{
    background-color: #f7d694;
    transform: translateY(25px) rotateX(-90deg);
}
/* 鼠标移入沿X轴旋转90度 */
.navbar-nav .nav-item:hover{
    transform: rotateX(90deg);
}